<template>
  <Dialog v-model="dialogVisible" title="复制模板" width="600px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="原模板信息">
        <el-card class="template-info">
          <div class="info-row">
            <span class="label">模板名称：</span>
            <span>{{ originalTemplate.templateName }}</span>
          </div>
          <div class="info-row">
            <span class="label">模板编码：</span>
            <span>{{ originalTemplate.templateCode }}</span>
          </div>
          <div class="info-row">
            <span class="label">适用职业：</span>
            <span>{{ originalTemplate.professionName }}</span>
          </div>
          <div class="info-row">
            <span class="label">技能等级：</span>
            <span>{{ originalTemplate.skillLevel }}</span>
          </div>
        </el-card>
      </el-form-item>
      
      <el-form-item label="新模板名称" prop="templateName">
        <el-input
          v-model="formData.templateName"
          placeholder="请输入新模板名称"
          maxlength="100"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="新模板编码" prop="templateCode">
        <el-input
          v-model="formData.templateCode"
          placeholder="请输入新模板编码"
          maxlength="50"
        />
      </el-form-item>
      
      <el-form-item label="适用职业" prop="professionCode">
        <el-select
          v-model="formData.professionCode"
          placeholder="请选择适用职业"
          style="width: 100%"
          filterable
          @change="handleProfessionChange"
        >
          <el-option
            v-for="profession in professionList"
            :key="profession.professionCode"
            :label="profession.professionName"
            :value="profession.professionCode"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item label="技能等级" prop="skillLevel">
        <el-select
          v-model="formData.skillLevel"
          placeholder="请选择技能等级"
          style="width: 100%"
        >
          <el-option label="五级/初级工" value="五级/初级工" />
          <el-option label="四级/中级工" value="四级/中级工" />
          <el-option label="三级/高级工" value="三级/高级工" />
          <el-option label="二级/技师" value="二级/技师" />
          <el-option label="一级/高级技师" value="一级/高级技师" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="评价方式" prop="evaluationMethod">
        <el-select
          v-model="formData.evaluationMethod"
          placeholder="请选择评价方式"
          style="width: 100%"
        >
          <el-option label="理论考试" value="理论考试" />
          <el-option label="实操考核" value="实操考核" />
          <el-option label="综合评审" value="综合评审" />
          <el-option label="理论+实操" value="理论+实操" />
          <el-option label="理论+实操+综合评审" value="理论+实操+综合评审" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="模板描述">
        <el-input
          v-model="formData.templateDescription"
          type="textarea"
          :rows="3"
          placeholder="请输入模板描述"
          maxlength="500"
          show-word-limit
        />
      </el-form-item>
      
      <el-form-item label="复制选项">
        <el-checkbox-group v-model="formData.copyOptions">
          <el-checkbox label="templateContent">模板内容</el-checkbox>
          <el-checkbox label="templateStructure">模板结构</el-checkbox>
          <el-checkbox label="scoringRules">评分规则</el-checkbox>
          <el-checkbox label="passingScore">及格分数</el-checkbox>
          <el-checkbox label="timeLimit">时间限制</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确认复制</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

defineOptions({ name: 'TemplateCopy' })

const emit = defineEmits(['success'])

const dialogVisible = ref(false)
const formLoading = ref(false)
const formRef = ref()
const professionList = ref([])

const originalTemplate = reactive({
  id: undefined,
  templateName: '',
  templateCode: '',
  professionName: '',
  skillLevel: ''
})

const formData = reactive({
  templateName: '',
  templateCode: '',
  professionCode: '',
  skillLevel: '',
  evaluationMethod: '',
  templateDescription: '',
  copyOptions: ['templateContent', 'templateStructure', 'scoringRules']
})

const formRules = reactive({
  templateName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
  templateCode: [{ required: true, message: '请输入模板编码', trigger: 'blur' }],
  professionCode: [{ required: true, message: '请选择适用职业', trigger: 'change' }],
  skillLevel: [{ required: true, message: '请选择技能等级', trigger: 'change' }],
  evaluationMethod: [{ required: true, message: '请选择评价方式', trigger: 'change' }]
})

/** 打开弹窗 */
const open = async (template: any) => {
  dialogVisible.value = true
  Object.assign(originalTemplate, template)
  
  // 设置默认值
  formData.templateName = `${template.templateName}_副本`
  formData.templateCode = `${template.templateCode}_COPY`
  formData.professionCode = template.professionCode
  formData.skillLevel = template.skillLevel
  formData.evaluationMethod = template.evaluationMethod
  formData.templateDescription = template.templateDescription
  
  await getProfessionList()
}

/** 获取职业列表 */
const getProfessionList = async () => {
  try {
    // TODO: 调用获取职业列表的API
    professionList.value = []
  } catch (error) {
    console.error('获取职业列表失败:', error)
  }
}

/** 职业变更处理 */
const handleProfessionChange = (professionCode: string) => {
  const profession = professionList.value.find(p => p.professionCode === professionCode)
  if (profession) {
    // 可以根据职业自动设置一些默认值
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.templateName = ''
  formData.templateCode = ''
  formData.professionCode = ''
  formData.skillLevel = ''
  formData.evaluationMethod = ''
  formData.templateDescription = ''
  formData.copyOptions = ['templateContent', 'templateStructure', 'scoringRules']
  formRef.value?.resetFields()
}

/** 提交表单 */
const submitForm = async () => {
  if (!formRef.value) return
  
  const valid = await formRef.value.validate()
  if (!valid) return
  
  try {
    formLoading.value = true
    
    const copyData = {
      originalTemplateId: originalTemplate.id,
      templateName: formData.templateName,
      templateCode: formData.templateCode,
      professionCode: formData.professionCode,
      skillLevel: formData.skillLevel,
      evaluationMethod: formData.evaluationMethod,
      templateDescription: formData.templateDescription,
      copyOptions: formData.copyOptions
    }
    
    // TODO: 调用复制模板的API
    // await copyTemplate(copyData)
    
    ElMessage.success('模板复制成功')
    dialogVisible.value = false
    emit('success')
  } catch (error) {
    console.error('模板复制失败:', error)
    ElMessage.error('模板复制失败')
  } finally {
    formLoading.value = false
  }
}

defineExpose({ open })
</script>

<style scoped>
.template-info {
  background-color: #f5f7fa;
  border: 1px solid #e4e7ed;
}

.info-row {
  display: flex;
  margin-bottom: 8px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  font-weight: bold;
  min-width: 80px;
  color: #606266;
}
</style>
